<%-- 
    Document   : tableTest
    Created on : 2011-08-03, 19:39:44
    Author     : Maxime
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html style="height: 100%;width: 100%">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript" src="js/jquery-1.6.2.js"></script>
        <script type="text/javascript" src="js/js/jquery-ui-1.8.14.custom.min.js"></script>
        <script type="text/javascript"> 
        
            $(document).ready(function() {
                $('button').button();
            });


        
            function hideSideBar(){

                $('#side_bar').hide('drop',{}, 1000, function(){});
                $('#main_screen').css('margin-left', '0px');
            }
        
            function showSideBar(){
              
                $('#side_bar').show('drop',{}, 1000, function(){$('#main_screen').css('margin-left', '200px');});

            
            }
    
        </script>
        <link href="js/css/le-frog/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css"/> 
        <style type="text/css">
            html {
                font-family: "Segoe UI", sans-serif;
                font-size: 9pt;
                height: 100%;
            }
            html body {
                margin: 0px;
                height: 100%;
                padding: 0px;
            }
            html body aside {
                background-color: rgb(32, 80, 128);
                float: left;
                height: 100%;
                width: 200px;
                padding: 0px;
                margin: 0px;
            }
            html body section {
                background-color: rgb(16, 40, 64);
                height: 100%;
                margin-left: 200px;
            }
            html body section nav {
                background-color: rgb(242, 242, 242);
                height: 32px;
                width: 100%;
            }
            html body section article {
                background-color: rgb(255, 255, 255);
                margin: 0px 32px 32px 32px;
            }
        </style>
    </head>
    <body>

        <nav>
            <button onclick="hideSideBar()">Hide</button><button onclick="showSideBar()">Show</button>

            <!-- breadcrumbs -->
            <!--            <a href="#home">Home</a>
                        <a href="#area">Area</a>
                        <a href="#category">Category</a>
                        <a href="#">Item</a>-->
        </nav>
        <aside id="side_bar">
            <!-- sidebar content -->
            <h1>HELLO</h1>
        </aside>
        <section id="main_screen">

            <iframe src="http://maximedupaul.com" style="width: 100%;height: 100%"></iframe>
        </section>

    </body>
</html>
